import React from 'react'
import ReactDOM from 'react-dom'   
import DatePicker from 'react-mobile-datepicker';  
import './css/Demo_datepicker.css' 

// https://www.npmjs.com/package/react-mobile-datepicker
class Demo_datepicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            
        };
    }
 
 
    
     componentWillMount = () => {
 
    } 
    componentDidMount = () => { 
    } 

    info={
        boxW:360,
        config:{
            theme:'ios',//   'default', 'dark', 'ios', 'android', 'android-dark'
             time: new Date(),
             isOpen: false,
             dateFormat:['YYYY年', 'MM月', 'DD日'],//['YYYY', 'MM', 'DD', 'hh', 'mm']
             showFormat:'YYYY-MM-DD',
             min:'',
             max:'',//new Date(2050, 0, 1)
        }
    } 
    handleClick = () => {
        this.info.config.isOpen = true
        this.setState();
    }
 
    handleCancel = () => {
        this.info.config.isOpen = false
        this.setState(); 
    }
 
    handleSelect = (time) => {
        this.info.config.time = time;
        this.handleCancel()
    }
 
    render() {
        let sd = 23;
        return (
            <div  className="Demo_datepicker">   
                <a
                    className="select-btn"
                    onClick={this.handleClick}>
                    {sd}
                </a>
 
                <DatePicker  
                    value={this.info.config.time}
                    theme={this.info.config.theme}
                    dateFormat={this.info.config.dateFormat}
                    showFormat={this.info.config.showFormat}
                    isOpen={this.info.config.isOpen}
                    onSelect={this.handleSelect}
                    onCancel={this.handleCancel} />
            </div>
        )
    }
} 
export default Demo_datepicker 